var canvasWidth = 877; //画布宽度
var canvasHeight = 672; //画布高度
var canvas = document.getElementById('canvas'); //获取画布
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var context = canvas.getContext('2d'); //获取画布的上下文context,获取画笔
var radius = 50; //声明探照灯的半径
var image = new Image(); //实例化对象，创建一个图片对象
image.src = 'images/pic.png'; //设置图片路径
image.onload = function() {
    initCanvas(); //调用初始化画布方法
}

//初始化画布方法
function initCanvas() {
    console.log('调用初始化画布方法');
    //清除上一次绘制
    context.clearRect(0, 0, canvas.width, canvas.height);
    //保存
    context.save();
    //开始路径
    context.beginPath();
    //绘制圆形探照灯
    var x = Math.random() * (canvas.width - 2 * radius) + radius;
    var y = Math.random() * (canvas.height - 2 * radius) + radius;
    console.log(x);
    console.log(y);
    context.arc(x, y, radius, 0, 2 * Math.PI, true); //绘制圆
    //clip()方法剪切圆形区域，限定绘制区域
    context.clip();
    context.drawImage(image, 0, 0);

    //恢复保存的状态
    context.restore();
}

function reset() {
    console.log('reset');
    initCanvas(); //调用初始化画布方法
}

function show() {
    console.log('show');
    radius = 2 * Math.max(canvas.width, canvas.height);
    console.log(radius);
    initCanvas();
}